<template>
	<div class="cart">
		<h4>全部商品</h4>
		<div class="cart-main">
			<div class="cart-th">
				<div class="cart-th1">全部</div>
				<div class="cart-th2">商品</div>
				<div class="cart-th3">单价（元）</div>
				<div class="cart-th4">数量</div>
				<div class="cart-th5">小计（元）</div>
				<div class="cart-th6">操作</div>
			</div>
			<div class="cart-body">
				<ul class="cart-list" v-for="item in cartList" :key="item.id">
					<!-- 选中状态 -->
					<li class="cart-list-con1">
						<input
							type="checkbox"
							name="chk_list"
							:checked="item.isChecked"
							@click="changCartChecked(item.skuId, $event)"
						/>
					</li>
					<!-- 详情 -->
					<li class="cart-list-con2">
						<img :src="item.imgUrl" />
						<div class="item-msg">
							{{ item.skuName }}
						</div>
					</li>
					<!-- 单价 -->
					<li class="cart-list-con4">
						<span class="price">{{ item.skuPrice }}.00</span>
					</li>
					<!-- 数量 -->
					<li class="cart-list-con5">
						<a class="mins" @click="postSkuNum('sub', item)">-</a>
						<input
							autocomplete="off"
							type="text"
							minnum="1"
							class="itxt"
							:value="item.skuNum"
							@change="postSkuNum('inp', item)"
						/>
						<a class="plus" @click="postSkuNum('add', item)">+</a>
					</li>
					<!-- 小计 -->
					<li class="cart-list-con6">
						<span class="sum">{{ item.skuPrice * item.skuNum }}</span>
					</li>
					<!-- 操作 -->
					<li class="cart-list-con7">
						<a class="sindelet" @click="delCartById(item.skuId)">删除</a>
						<br />
						<a href="#none">移到收藏</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- 下方功能区 -->
		<div class="cart-tool">
			<div class="select-all">
				<input
					class="chooseAll"
					type="checkbox"
					:checked="isAll && cartList.length"
					@click="changeAllChecked"
				/>
				<span>全选</span>
			</div>
			<div class="option">
				<a @click="delCartByChecked">删除选中的商品</a>
				<a href="#none">移到我的关注</a>
				<a href="#none">清除下柜商品</a>
			</div>
			<div class="money-box">
				<div class="chosed">
					已选择 <span>{{ checkedNum }}</span
					>件商品
				</div>
				<div class="sumprice">
					<em>总价（不含运费） ：</em>
					<i class="summoney">{{ totalPrice }}</i>
				</div>
				<div class="sumbtn">
					<router-link class="sum-btn" to="/trade">结算</router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState } from "vuex";
import throttle from "lodash/throttle";
export default {
	name: "ShopCart",
	data() {
		return {};
	},
	methods: {
		// 获取cart商品信息
		dispatchCartList() {
			this.$store.dispatch("shopcart/getCartList");
		},

		// 处理 并提交 商品数量
		postSkuNum: throttle(async function (flag, skuItem) {
			let tempNum = 0;
			switch (flag) {
				case "sub": // "-"的情况
					tempNum = skuItem.skuNum > 1 ? -1 : 0;
					break;

				case "add": // "+"的情况
					tempNum = 1;
					break;

				case "inp": // inp的情况
					if (/^[1-9][1-9]*$/.test(event.target.value)) {
						tempNum = event.target.value - skuItem.skuNum;
					} else {
						tempNum = 0;
					}
					break;
			}
			// 处理完skuNum后，post商品数据
			const res = await this.$store.dispatch("detail/postCart", {
				skuId: skuItem.skuId,
				skuNum: tempNum,
			});

			if (res == "ok") {
				// post成功后，重新发送请求，更新仓库中的商品数据
				this.dispatchCartList();
			} else {
				alert("网络出错了。。。");
			}
		}, 1000),

		// 修改 商品选中状态
		async changCartChecked(skuId, eve) {
			let isChecked = eve.target.checked ? 1 : 0;
			try {
				const res = await this.$store.dispatch("shopcart/getCartChecked", {
					skuId,
					isChecked,
				});
				this.dispatchCartList();
			} catch (error) {
				alert(error);
			}
		},

		// 修改 商品全选状态
		async changeAllChecked(event) {
			let isAllChecked = event.target.checked ? 1 : 0;
			try {
				await this.$store.dispatch("shopcart/getAllChecked", isAllChecked);
				this.dispatchCartList(); // 成功重新获取商品数据
			} catch (error) {
				alert(error);
			}
		},

		// 删除 指定购物车商品
		async delCartById(skuId) {
			try {
				await this.$store.dispatch("shopcart/deleteCart", skuId);
				this.dispatchCartList(); // 成功重新获取商品数据
			} catch (error) {
				alert(error);
			}
		},

		// 删除 选中的全部商品
		async delCartByChecked() {
			try {
				await this.$store.dispatch("shopcart/deleteCheckedCart");
				this.dispatchCartList();
			} catch (error) {
				alert(error);
			}
		},
	},
	// 挂载时请求商品数据
	mounted() {
		this.$store.dispatch("shopcart/getCartList");
	},
	computed: {
		...mapState("shopcart", ["cartList"]),
		isAll() {
			return this.cartList.every((item) => item.isChecked == 1);
		},

		totalPrice() {
			return this.cartList.reduce((tmp, item) => {
				tmp += item.skuNum * item.skuPrice;
				return tmp;
			}, 0);
		},
		// 已选择商品的个数
		checkedNum() {
			// 筛选出ischecked的obj的length
			return this.cartList.filter((item) => item.isChecked == 1).length;
		},
	},
};
</script>

<style lang="less" scoped>
.cart {
	width: 1200px;
	margin: 0 auto;

	a {
		cursor: pointer;
	}

	h4 {
		margin: 9px 0;
		font-size: 14px;
		line-height: 21px;
	}

	.cart-main {
		.cart-th {
			background: #f5f5f5;
			border: 1px solid #ddd;
			padding: 10px;
			overflow: hidden;

			& > div {
				float: left;
			}

			.cart-th1 {
				width: 25%;

				input {
					vertical-align: middle;
				}

				span {
					vertical-align: middle;
				}
			}

			.cart-th2 {
				width: 25%;
			}

			.cart-th3,
			.cart-th4,
			.cart-th5,
			.cart-th6 {
				width: 12.5%;
			}
		}

		.cart-body {
			margin: 15px 0;
			border: 1px solid #ddd;

			.cart-list {
				padding: 10px;
				border-bottom: 1px solid #ddd;
				overflow: hidden;

				& > li {
					float: left;
				}

				.cart-list-con1 {
					width: 15%;
				}

				.cart-list-con2 {
					width: 35%;

					img {
						width: 82px;
						height: 82px;
						float: left;
					}

					.item-msg {
						float: left;
						width: 150px;
						margin: 0 10px;
						line-height: 18px;
					}
				}

				.cart-list-con3 {
					width: 20.8333%;

					.item-txt {
						text-align: center;
					}
				}

				.cart-list-con4 {
					width: 10%;
				}

				.cart-list-con5 {
					width: 17%;

					.mins {
						border: 1px solid #ddd;
						border-right: 0;
						float: left;
						color: #666;
						width: 6px;
						text-align: center;
						padding: 8px;
					}

					input {
						border: 1px solid #ddd;
						width: 40px;
						height: 33px;
						float: left;
						text-align: center;
						font-size: 14px;
					}

					.plus {
						border: 1px solid #ddd;
						border-left: 0;
						float: left;
						color: #666;
						width: 6px;
						text-align: center;
						padding: 8px;
					}
				}

				.cart-list-con6 {
					width: 10%;

					.sum {
						font-size: 16px;
					}
				}

				.cart-list-con7 {
					width: 13%;

					a {
						color: #666;
					}
				}
			}
		}
	}

	.cart-tool {
		overflow: hidden;
		border: 1px solid #ddd;
		line-height: 1.5rem;

		.select-all {
			padding: 10px;
			overflow: hidden;
			float: left;

			span {
				vertical-align: middle;
			}

			input {
				vertical-align: middle;
				margin-right: 5px;
			}
		}

		.option {
			padding: 10px;
			overflow: hidden;
			float: left;

			a {
				float: left;
				padding: 0 10px;
				color: #333;
				border: #666 1px solid;
				margin-right: 10px;
				border-radius: 3px;
			}
		}

		.money-box {
			line-height: 2.7rem;
			float: right;

			.chosed {
				float: left;
				padding: 0 10px;
			}

			.sumprice {
				width: 200px;
				float: left;
				padding: 0 10px;

				.summoney {
					color: #c81623;
					font-size: 16px;
				}
			}

			.sumbtn {
				float: right;

				a {
					display: block;
					position: relative;
					width: 96px;
					height: 52px;
					line-height: 52px;
					color: #fff;
					text-align: center;
					font-size: 18px;
					font-family: "Microsoft YaHei";
					background: #e1251b;
					overflow: hidden;
				}
			}
		}
	}
}
</style>
